<template>
	<view class="group-detail__-content">
		<view class="head-bg">

		</view>
		<view class="commodity">
			<commodity-show showSubmit="true" price="299" oldPrice="399" sellCount="9" people="4" src="" classify="烦人 | 不好使 | 没脑子" title="萨斯刚萨斯刚萨斯刚萨斯刚萨斯刚萨斯刚萨斯刚"></commodity-show>
		</view>
		<view class="group-member">
			<view class="title">待成团，还差1人拼团成功</view>
			<view class="user-list">
				<view class="image-content" v-for="v in 4">
					<view class="head-title" :class="v == 1 ? 'is-head' : ''">{{v == 1 ? '团长' : ''}}</view>
					<image src=""></image>
				</view>
			</view>
			<view class="sub-btn">立即参团</view>
		</view>
		<view class="explain">
			<view class="title">玩法</view>
			<view class="group-explain">拼团说明</view>
			<view class="iconfont iconright"></view>
		</view>
	</view>
</template>

<script>
	import commodityShow from '../group-boking-commodity/components/group-boking-commodity-show.vue'
	export default {
		components: {
			commodityShow
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.group-detail__-content {
		padding-top: 60upx;

		.head-bg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 280upx;
			background: linear-gradient(125deg, #FF4A00 0%, #FF6F00 48%, #FF0000 100%);
		}

		.commodity {
			position: relative;
			z-index: 9;
			width: 690upx;
			height: 280upx;
			margin: auto;
			border-radius: 10upx;
			padding: 40upx 30upx;
			box-sizing: border-box;
			background-color: #FFFFFF;
		}

		.group-member {
			position: relative;
			height: 370upx;
			margin-top: 20upx;
			background-color: #FFFFFF;
			padding: 30upx;
			padding-top: 40upx;
			box-sizing: border-box;

			.title {
				width: 100%;
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				text-align: center;
			}

			.user-list {
				margin-top: 28upx;
				display: flex;
				justify-content: center;

				.image-content {
					width: 72upx;
					margin-left: 26upx;

					.head-title {
						width: 72upx;
						height: 32upx;
						line-height: 32upx;
						text-align: center;
						font-size: 24upx;
					}

					.is-head {
						background: #F3DFB1;
						border-radius: 10upx;
					}

					image {
						width: 72upx;
						height: 72upx;
						border-radius: 72upx;
						background-color: #E7E7E7;
					}
				}

				.image-content:fisrst-child {
					margin-left: 0;
				}
			}

			.sub-btn {
				position: absolute;
				bottom: 30upx;
				width: 690upx;
				height: 70upx;
				text-align: center;
				background: #F37B1D;
				color: #FFFFFF;
				opacity: 1;
				border-radius: 70upx;
				font-size: 28upx;
				line-height: 70upx;
			}
		}
		.explain{
			padding: 0 30upx;
			box-sizing: border-box;
			display: flex;
			background-color: #FFFFFF;
			margin-top: 6upx;
			view {
				line-height: 90upx;
			}
			.title,.iconright{
				color: #999999;
				font-size: 24upx;
			}
			.group-explain{
				margin-left: auto;
				font-size: 24upx;
			}
			.iconright{
				font-size: 24upx;
				margin-left: 10upx;
			}
		}
	}
</style>
